<!--
 * @Date: 2023-03-13 19:01:58
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-14 15:23:07
 * @FilePath: \A19\frontend\src\components\Charts\BarChart.vue
-->
<template>
    <div ref="barChartRef" class="chart-container"></div>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRefs, watchEffect, onMounted, nextTick } from "vue";
import { echarts, ECOption } from "@/hooks/echarts/chartInitHook";
import { users } from "@/shared/types/user";
import { ECharts } from "echarts/core";

const props = defineProps<{
    homeworkDate:
    | {
        name: string;
        questions: number;
        userHomework: number[];
        _id: string;
    }[]
    | undefined;
    courseinfo:
    | {
        _id: string;
        student: users[];
        course: string;
    }[]
    | undefined;
    currentName:string;
    color:string[]
}>();
const { homeworkDate, courseinfo,currentName } = toRefs(props);

const barChartRef = ref<HTMLDivElement>();
let barChart: ECharts;

watchEffect(() => {
    if (!barChartRef.value || !homeworkDate.value || !courseinfo.value) return;
    barChart = echarts.init(barChartRef.value);

    const homework = homeworkDate.value.find(h => h.name === currentName.value)
    // console.log(homework);
    if(!homework) return
    const theHomework = {
        ...homework,
        userHomework:[...homework!.userHomework]
    }

    // const l = courseinfo.value.length - theHomework.userHomework.length
    // for(let i = 0;i < l;i++){
    //     theHomework.userHomework.push(0)
    // }
    const unpassed:number[] = []
    const passed:number[] = []
    const excellent:number[] = []

    courseinfo.value.forEach((_,index,arr)=>{
        if(theHomework.userHomework[index]){
            const score = theHomework.userHomework[index];
            if(score >= 0 && score < 60) unpassed.push(score)
            else if(score >= 60 && score < 80) passed.push(score)
            else excellent.push(score)
        }
        else{
            unpassed.push(0)
        }
    })

    // console.log(unpassed,passed,excellent);
    
    
    const option = {
        title: {
            text:`${currentName.value}分数分布`,
            textStyle:{
                fontWeight:'normal',
                fontSize:16
            },
            top:'10%'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            left: 'center',
            bottom:'5%',
            icon:'circle'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: unpassed.length, name: '60分以下' },
                    { value: passed.length, name: '60~80分' },
                    { value: excellent.length, name: '80分以上' },
                ],
                color:props.color
                // emphasis: {
                //     itemStyle: {
                //         shadowBlur: 10,
                //         shadowOffsetX: 0,
                //         shadowColor: 'rgba(0, 0, 0, 0.5)'
                //     }
                // }
            }
        ],
    } as ECOption

    barChart.setOption(option)
})

</script>

<style lang="less" scoped>
.chart-container {
    height: 100%;
    width: 100%;
    position: relative;
    // background-color: aqua;
}
</style>